<template>
  <v-container fluid text-xs-center>
  <v-layout row wrap>
    <v-flex>
      <v-form v-model="valid" ref="form" lazy-validation id='form'>
        <v-text-field
          label="First Name"
          v-model="firstName"
          :rules="firstNameRules"
          :counter="25"
          required
        ></v-text-field>
        <v-text-field
          label="Mid Name"
          v-model="midName"
          :counter="25"
        ></v-text-field>
        <v-text-field
          label="Last Name"
          v-model="lastName"
          :rules="lastNameRules"
          :counter="25"
          required
        ></v-text-field>
        <v-text-field
          label="Author Description"
          v-model="authorDesc"
          :counter="1024"
        ></v-text-field>
        <v-btn
          @click="submit"
          :disable="!valid"
        >
          Submit
        </v-btn>
        <v-btn @click="clear">Clear</v-btn>
      </v-form>
    </v-flex>
    <v-flex xs12>
      <v-card>
        <v-card-title>
          <b>Authors</b>
          <v-spacer></v-spacer>
          <v-text-field
            append-icon="search"
            label="Search"
            single-line
            hide-details
            v-model="search"
          ></v-text-field>
        </v-card-title>
      </v-card>
    </v-flex>
    <v-flex xs12>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="authorItems"
        :pagination.sync="pagination"
        :search="search"
        item-key="id"
        class="elevation-1"
        select-all
        v-bind="{loading: 'loading'}"
      >
        <template slot="headers" slot-scope="props">
          <tr>
            <th>
              <v-checkbox
                primary
                hide-details
                @click.native="toggleAll"
                :input-value="props.all"
                :indeterminate="props.indeterminate"
              ></v-checkbox>
            </th>
            <th
              v-for="header in props.headers" :key="header.text"
              :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
              <v-icon>arrow_upward</v-icon>
              {{ header.text }}
            </th>
          </tr>
        </template>
        <template slot="items" slot-scope="props">
          <tr :active="props.selected" @click="props.selected = !props.selected">
            <td>
              <v-checkbox
                primary
                hide-details
                :input-value="props.selected"
              ></v-checkbox>
            </td>
            <td>{{ props.item.id }}</td>
            <td class="text-xs-right">{{ props.item.last_name }}</td>
            <td class="text-xs-right">{{ props.item.mid_name }}</td>
            <td class="text-xs-right">{{ props.item.first_name }}</td>
            <td class="text-xs-right">{{ props.item.des }}</td>
            <td class="text-xs-right">{{ props.item.updatets }}</td>
            <td class="text-xs-right">{{ props.item.createts }}</td>
          </tr>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
  </v-container>
</template>

<script>
export default {
  name: 'AuthorManage',
  data () {
    return {
      valid: true,
      firstName: '',
      midName: '',
      lastName: '',
      authorDesc: '',
      firstNameRules: [
        (v) => !!v || 'First Name is required',
        (v) => (v && v.length <= 25) || 'First Name must be less than 25 characters'
      ],
      lastNameRules: [
        (v) => !!v || 'Last Name is required',
        (v) => (v && v.length <= 25) || 'Last Name must be less than 25 characters'
      ],
      search: '',
      pagination: {
        sortBy: 'id'
      },
      selected: [],
      headers: [
        {text: 'ID', align: 'right', value: 'id'},
        {text: 'Last Name', align: 'center', value: 'last_name'},
        {text: 'Mid Name', align: 'center', value: 'mid_name'},
        {text: 'First Name', align: 'center', value: 'first_name'},
        {text: 'Description', align: 'center', value: 'des'},
        {text: 'updatets', align: 'right', value: 'updatets'},
        {text: 'createts', align: 'left', value: 'createts'}
      ]
    }
  },
  methods: {
    submit () {
      if (this.$refs.form.validate()) {
        const formData = {
          first_name: this.firstName,
          mid_name: this.midName,
          last_name: this.lastName,
          des: this.authorDesc
        }
        this.axios.post('/authors/', formData).then(res => {
          if (res.status === 201) {
            this.$bus.$emit('insertedAuthor', res.data)
          }
          this.clear()
        })
      }
    },
    clear () {
      this.$refs.form.reset()
    },
    toggleAll () {
      if (this.selected.length) this.selected = []
      else this.selected = this.authorItems.slice()
    },
    changeSort (column) {
      if (this.pagination.sortBy === column) {
        this.pagination.descending = !this.pagination.descending
      } else {
        this.pagination.sortBy = column
        this.pagination.descending = false
      }
    }
  },
  computed: {
    authorItems () {
      return this.$store.state.author.authorItems
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#form {
  margin: 1.5em;
}
</style>
